<template>
    <div>
        <el-upload name="multipartfiles" ref="upload" :multiple="multiple" :file-list="uploadList"

                   :before-upload="handleBeforeUpload"
                   :http-request="uploadSectionFile"
                   :action="nouse"
                   :on-remove="handleRemove"
                   :on-preview="handleDown"
                   :disabled="disabled"
                   :class="disabled?'upload-demo-noshow':'upload-demo'" :data="form">
            <el-button size="small" type="primary" v-show="!disabled">点击上传</el-button>
            <div slot="tip" v-show="!disabled" class="el-upload__tip">{{tip}}</div>
        </el-upload>

    </div>
</template>
<script>
    import {AjaxByAll, AjaxDownloadFile, apiPath} from '@/api/api'

    export default {
        name: "uploadCustom",
        data() {
            return {

                uploadList: [],

                nouse: '',
                downloadUrl: '',
                form: {
                    modelId: this.modelId,
                    modelCategory: this.modelCategory
                }
            };
        },
        methods: {
            uploadSectionFile: function (param) {
                //file就是当前添加的文件
                var fileObj = param.file;
                // FormData 对象
                var form = new FormData();
                // 文件对象,key是后台接受的参数名称
                form.append("multipartfiles", fileObj);
                AjaxByAll('post', 'sys/attachment/upload?modelId=' + this.modelId + '&modelCategory=' + this.modelCategory, form).then(data => {
                    if (data.code != 200) {

                        this.$message({
                            message: '操作失败：' + data.msg,
                            type: 'error'
                        });
                        param.onError()
                    } else {

                        let result = data.data;
                        // 更新uploadList
                        this.uploadList.push({"name": result.name, "url": result.id});


                        this.$emit('handleUploadsValue', this.uploadList);
                    }

                });

            },
            handleDown(file) {

                AjaxDownloadFile(this.downloadUrl + file.url, null, file.name);
            },
            handleRemove(file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                // 更新uploadList
                this.uploadList = this.$refs.upload.fileList;
                AjaxByAll('delete', 'sys/attachment/' + file.url, null).then(data => {
                    if (data.code != 200) {


                        this.$message({
                            message: '操作失败：' + data.msg,
                            type: 'error'
                        });
                    }

                });
            },

            handleFormatError(file) {
                this.$Notice.warning({
                    title: "文件格式不正确",
                    desc: "文件：" +
                        file.name +
                        "格式不正确, 请选择 jpg/png."
                });
            },

            handleBeforeUpload() {
                // 更新uploadList
                this.uploadList = this.$refs.upload.fileList;
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$message({
                        message: "一次最多选择五个文件进行上传.",
                        type: 'warning'
                    });

                }
                return check;
            }
        },
        mounted() {

            this.downloadUrl = apiPath + '/sys/attachment/download/';
            AjaxByAll('get', 'sys/attachment/list', {
                "modelId": this.modelId,
                "modelCategory": this.modelCategory
            }).then(data => {
                if (data.code === 200) {
                    this.uploadList = data.data;

                } else {
                    this.$message({
                        message: '操作失败：' + data.msg,
                        type: 'error'
                    });
                }

            });
        },
        props: {


            modelId: {
                type: String,
                default: ''
            },
            modelCategory: {
                type: String,
                default: ''
            },
            multiple: Boolean,

            disabled: Boolean,
            tip: {
                type: String,
                default: '请上传文件'
            }
        }
    };

</script>
<style>

    .upload-demo-noshow .el-upload {
        display: none
    }
</style>
